<template>
  <div class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">培训信息</h3>
      </div>
      <div class="box-body">
        <el-form :model="editTraining" status-icon ref="editTraining" label-width="100px">
          <div class="col-sm-6">
            <el-form-item label="起始时间" prop="starttime" :required="true">
              <MyDatePicker :editable="isEditable" v-bind:date="editTraining.starttime" @timeChanged="(time)=>this.editTraining.starttime =time">
              </MyDatePicker>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="结束时间" prop="endtime" :required="true">
              <MyDatePicker :editable="isEditable" v-bind:date="editTraining.endtime" @timeChanged="(time)=>this.editTraining.endtime =time">
              </MyDatePicker>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="培训类别">
              <el-select :disabled="!isEditable" v-model="editTraining.category" @change="value=>editTraining.category = value">
                <el-option v-for="item in this.traingcategorylist" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="培训名称" prop='traingname'>
              <el-input :disabled="!isEditable" v-model="editTraining.traingname" placeholder="请输入培训名称" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="主办单位">
              <el-input :disabled="!isEditable" v-model="editTraining.agency" placeholder="请输入主办单位" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="学习内容">
              <el-input :disabled="!isEditable" v-model="editTraining.course" placeholder="请输入学习内容" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="课时">
              <el-input :disabled="!isEditable" v-model="editTraining.hours" placeholder="请输入课时" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="成绩">
              <el-input :disabled="!isEditable" v-model="editTraining.score" placeholder="请输入成绩" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-12">
            <el-form-item label="备注">
              <el-input :disabled="!isEditable" type="textarea" :rows="2" v-model="editTraining.comment" placeholder="请输入备注信息"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import MyDatePicker from '../../mycomponents/common/MyDatePicker'
  export default {
    name: 'trainingForm',
    props: ['training', 'editable'],
    data(router) {
      return {
        isEditable: false,
        traingcategorylist: [],
        editTraining: {
          starttime: '',
          endtime: '',
          category: 1,
          traingname: '',
          agency: '',
          course: '',
          hours: 0,
          score: 100,
          comment: ''
        },
        socialRules: {
          starttime: [{
            required: true,
            message: '请输入起始时间',
            trigger: 'blur'
          }],
          endtime: [{
            required: true,
            message: '请输入结束时间',
            trigger: 'blur'
          }],
          traingname: [{
            required: true,
            message: '请输入培训名称',
            trigger: 'blur'
          }],
        }
      }
    },
    created: function() {
      if (this.training) {
        this.editTraining = this.training
      }
      if (this.editable != null && this.editable != undefined) {
        this.isEditable = this.editable
      }
      this.traingcategorylist = this.$store.state.sysconfigs.categorylist
    },
    components: {
      MyDatePicker
    },
    methods: {
      getData: function() {
        var validRes = true
        this.$refs.editTraining.validate((valid) => {
          if (valid) {
            validRes = true
          } else {
            console.log('error submit!!');
            validRes = false
            return false;
          }
        });
        console.log(" editTraining:", JSON.stringify(this.editTraining));
        if (!validRes) {
          return null
        }
        return this.editTraining;
      }
    }
  }
</script>

